<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>冷链物流</title>
  <!--  widthmaximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  
  <style>
  #example2 td{
	border:1px #d2d6de solid;
	text-align:center;
	vertical-align:middle;
  }
  </style>
</head>
<body>

  <div class="container" style="background:#FFFFFF">
	<section class="content-header">
		<div class="col-lg-10">
			<!-- <h2>系统名称</h2> -->
			<ol class="breadcrumb" id="index_breadcrumb">
				<li class="active">
					<i class='fa fa-anchor' style='color:#18a689;'></i>&nbsp;&nbsp;
						<strong>当前位置：信息设置>>围栏管理</strong>
				</li>
			</ol>
		</div>
		<div class="col-lg-2">
		</div>
	</section>
	<div class="row clearfix col-lg-3">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active">
				<a href="?#home" data-toggle="tab">
					 围栏视角
				</a>
			</li>
			<li><a href="?#ios" data-toggle="tab">车辆视角</a></li>
			
		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="home">
				<div class="row clearfix col-lg-12">
					<span style="float:left">围栏列表</span>
					<span style="float:right; background-color:red; margin-left:10px;cursor: pointer;"><img id="u8696_img" src="../../images/u3986.png"></span>
					<span style="float:right; background-color:red; margin-left:10px;cursor: pointer;"><img id="u8691_img" src="../../images/u8691.png"></span>
					<span style="float:right; background-color:red; margin-left:10px;cursor: pointer;"><img id="u8684_img" src="../../images/u8684.png"></span>
					<hr style="background-color:red;height:1px"/>
					
				</div>
				
				<div class="row clearfix col-lg-12" id="jstree_demo_div"></div>
			</div>
			<div class="tab-pane fade" id="ios">
				<div class="row clearfix col-lg-12">
					<span style="float:left">车辆列表</span>
					<hr style="background-color:red;height:1px"/>
				</div>
				<div class="row clearfix">
					<span class="col-lg-10">
						<input type="text" style="margin-top:5px;" class="form-control" id="numberPlate1" placeholder="请输入车辆">
					</span>
				</div>
				<div class="row clearfix">
					<span class="col-lg-12">
						<label style="float:left"><input type="checkbox" value="">已添加围栏</label>
						<label style="float:left"><input type="checkbox" value="">未添加围栏</label>
					</span>
				</div>
				<div class="row clearfix" id="jstree_demo_div3"></div>
				
				<div class="row clearfix col-lg-12">
					<span style="float:left;height:22px">围栏列表</span>
					<span style="float:right; background-color:#3FB8F5; margin-left:10px;cursor: pointer;"><img id="u8696_img" src="../../images/u3986.png" style="width:25px"></span>
					<span style="float:right;margin-left:10px;"><button type="button" style="height:22px;width:40px;background-color:#3FB8F5;border:none">关闭</button></span>
					<span style="float:right;margin-left:10px;"><button type="button" style="height:22px;width:40px;background-color:#3FB8F5;border:none">开启</button></span>
				</div>
				<div class="row clearfix col-lg-12">
					<hr style="background-color:red;height:1px"/>
				</div>
				<div class="row clearfix col-lg-12" id="jstree_demo_div4"></div>
			</div>
			
		</div>
	</div>
	
	
	<div class="row clearfix col-lg-9">
		<div class="row clearfix" id="hidd" style="display:none;">
			<span class="row clearfix">创建一个新围栏</span>
			<form>
				<table id="example2" class="table table-bordered table-hover">
					<tr>
					  <td style="width:10%"><label for="numberPlate">围栏编号</label></td>
					  <td style="width:12%"><input type="email" class="form-control" id="numberPlate" placeholder="围栏编号"></td>
					  <td style="width:10%"><label for="fullName">*围栏名称</label></td>
					  <td style="width:12%"><input type="email" class="form-control" id="fullName" placeholder="围栏名称"></td>
					  <td style="width:10%"><label for="fullName">*围栏类型</label></td>
					  <td style="width:15%">
						<select class="form-control" >
							<option>圆形</option>
							<option>多边形</option>
							<option>行政区划</option>
						</select>
					  </td>
					  <td style="width:10%"><label for="fullName">*启用状态</label></td>
					  <td style="width:12%">
						<select class="form-control" >
							<option>启用</option>
							<option>停用</option>
						</select>
					  </td>
					</tr>
					<tr>
					  <td style="width:10%"><label for="numberPlate">*中心经度</label></td>
					  <td style="width:12%"><input type="email" class="form-control" id="numberPlate" placeholder="中心经度"></td>
					  <td style="width:10%"><label for="fullName">*中心纬度</label></td>
					  <td style="width:12%"><input type="email" class="form-control" id="fullName" placeholder="中心纬度"></td>
					  <td style="width:10%"><label for="fullName">*半径(米)</label></td>
					  <td style="width:15%"><input type="email" class="form-control" id="fullName" placeholder="半径（米）"></td>
					  <td style="width:10%"><label for="fullName">*应用车辆数</label></td>
					  <td style="width:8%">
						<div class="input-group input-group-sm">
							<input type="text" class="form-control" id="fullName" placeholder="车辆数">
							<span class="input-group-btn">
								<button type="button" class="btn btn-info btn-flat" data-toggle="modal" data-target="#clModal">
									<img id="u8908_img" src="../../images/u4139.png">
								</button>
							</span>
						</div>
					  </td>
					</tr>
					<tr>
					  <td colspan="4"><button type="button" class="btn btn-info pull-right">保存</button></td>
					  <td colspan="4"><button type="button" class="btn btn-info pull-left" id="qx">取消</button></td>
					</tr>
					
					
				  </table>
			</form>
		</div>
		<div class="modal fade" id="clModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
					
			  <div class="modal-dialog" style="width:60%">
			  
				  <div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							将围栏绑定到车辆
						</h4>
					</div>
					<div class="modal-body">
					  <div class="row clearfix col-lg-5">
						<div class="row clearfix">
							<span class="col-lg-5">请选择车辆：</span>
						</div>
						<div class="row clearfix">
							<span class="col-lg-7">
								<input type="text" style="margin-top:5px;" class="form-control" id="numberPlate1" placeholder="请输入车辆">
							</span>
						</div>
						
						<div class="row clearfix" id="jstree_demo_div2"></div>
					  </div>
					  
					  <div class="row clearfix col-lg-2" style="height:300px;text-align:center;padding-top:80px">
						<div class="row clearfix"><button type="button" style="width:30px;height:40px;" onclick="add()">></button></div>
						<div class="row clearfix"><button type="button" style="width:30px;height:40px;" onclick="del()"><</button></div>
					  </div>
					  
					  <div class="row clearfix col-lg-6">
						<div class="row clearfix col-lg-12">
							<span style="float:left;line-height:45px" class="col-lg-6">已设置车辆</span>
							<button type="button" class="btn btn-primary btn-lg2">开启</button>
							<button type="button" class="btn btn-primary btn-lg2">关闭</button>
						</div>
						
						<table class="table table-bordered" id="cltable">
			
						</table>
					  </div>
					  
					  
						<div class="modal-footer">
							<button type="button" class="btn btn-primary">
								提交更改
							</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
						</div>
					</div>
				</div>
			</div>
				
		</div>
		<div class="row clearfix" id="container_Map" style="padding-right:0px;height:800px;"></div>
	</div>
  </div>



  <script type="text/javascript" src="../xxsz/js/dzwlsz.js"></script>
</body>
</html>
